<!--suppress HtmlUnknownBooleanAttribute, VueUnrecognizedDirective -->
<template>
  <div class="tetris-friends">
    <!-- 页面头部 -->
    <div class="header">
      <div class="left">
        <img class="logo" src="@/assets/logo.png" alt="LOGO">
      </div>
      <div class="right">
        <div class="desc">为什么还不开始打块？只有打块才是真正的营业，马上开始打块吧！</div>
        <b class="desc"
           style="color: #aa0000">由于小破站机制原因，未开播打块不能自动添加，在TA打块的时候搜索TA的房间号即可手动添加</b>
        <b class="desc" style="color: #003b95">点击房间号可以新页面打开房间，想要偷偷看可以点击查房(以未登录状态偷看)</b>
        <div class="count">
          <a @click="statDrawerVisible = true" style="cursor: pointer">[ 监控服务可用性 ]</a>
          按当前条件查询到 <b>[ {{ pagination.total }} ]</b> 个打块播间，状态更新约有1-2分钟延迟
        </div>
      </div>
    </div>
    <!-- 表单区域 -->
    <div class="action">
      <el-form :inline="true" :model="formInline" size="small">
        <el-form-item>
          <el-input style="width: 260px" v-model="formInline.search" placeholder="输入关键词" clearable
                    @keyup.enter="listTetrRoom">
            <template #prepend>
              <el-select v-model="formInline.type" placeholder="搜索类型" size="small" style="width: 90px">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
              style="width: 120px"
              v-model="formInline.online"
              placeholder="游戏状态"
          >
            <el-option label="全部游戏状态" :value="-1"/>
            <el-option label="游戏在线" :value="1"/>
            <el-option label="游戏离线" :value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
              style="width: 120px"
              v-model="formInline.live_status"
              placeholder="开播状态"
          >
            <el-option label="全部开播状态" :value="-1"/>
            <el-option label="正在直播" :value="1"/>
            <el-option label="轮播中" :value="2"/>
            <el-option label="没开播" :value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="listTetrRoom" v-btn>查询</el-button>
          <el-button type="info" @click="resetSearch" v-btn>重置搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 猜你想看 -->
    <div class="areas">
      <span>猜你想看:</span>
      <el-tooltip content="不会真的有人想看打块吧?" placement="top-start">
        <span class="link disabled">俄罗斯方块</span>
      </el-tooltip>
      <el-tooltip content="!!! 看了之后我会是多么乐观开朗可爱的小男孩 !!!" placement="top-start">
        <span class="link hot" @click="fastSearch('舞见',-1,1)">{强烈推荐} 舞见</span>
      </el-tooltip>
      <el-tooltip content="谢谢你 Thanks♪(･ω･)ﾉ" placement="top-start">
        <span class="link hot" @click="fastSearch('颜值',-1,1)">{HOT} 颜值</span>
      </el-tooltip>
      <span class="link" @click="fastSearch('电台',-1,1)">电台</span>
      <span class="link" @click="fastSearch('唱见',-1,1)">唱见</span>
      <span class="link" @click="fastSearch('虚拟',-1,1)">虚拟</span>
      <span class="link" @click="fastSearch('',1,-1)">所有在打</span>
      <span class="link" @click="fastSearch('',1,1)">开播在打</span>
    </div>
    <!-- 房间列表 -->
    <div class="table">
      <el-table :data="list"
                size="small"
                row-key="room_id"
                show-overflow-tooltip
                :row-class-name="tableRowClassName"
                element-loading-text="正在读取块友"
                v-loading.fullscreen="!isLoaded">
        <el-table-column prop="state" label="游戏状态" width="80" align="center">
          <template #default="scope">
            <div>
              <el-text v-if="scope.row.tetris_status" size="small" type="success">游戏在线</el-text>
              <el-text v-if="!scope.row.tetris_status" size="small" type="danger">游戏离线</el-text>
            </div>
            <div>
              <el-text v-if="scope.row.live_status === 1" size="small" type="success">开播</el-text>
              <el-text v-if="scope.row.live_status === 2" size="small" type="info">轮播</el-text>
              <el-text v-if="scope.row.live_status === 0" size="small" type="danger">下播</el-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="room_id" label="房间分区" width="120">
          <template #default="scope">
            <el-link style="font-size: 12px" target="_blank" :href="`https://live.bilibili.com/${scope.row.room_id}`">
              <b>{{ scope.row.room_id }}</b>
            </el-link>
            <el-text @click="copyText(scope.row.room_id)"
                     style="margin-right: 5px;font-size: 12px;margin-left: 3px;cursor: pointer">
              <el-tooltip content="点击复制房间号" placement="top">
                <i class="el-icon-document"></i>
              </el-tooltip>
            </el-text>
            <div @click="fastSearch(scope.row.area_name,-1,1)" style="cursor: pointer">
              {{ scope.row.area_name ? scope.row.area_name : '未知分区' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="avatar_url" label="UP" width="56" align="center">
          <template #default="scope">
            <div
                style="width: 38px;height: 38px;overflow: hidden;display: flex;justify-content: center;align-items: center; border-radius: 10px">
              <img :src="scope.row.face" alt="Avatar" style="width: 38px;height: 38px">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="anchor_name" label="" width="220">
          <template #default="scope">
            <div>
              <div>
                <el-tag effect="dark" round type="primary" size="small" v-if="scope.row.medal_id > 0"
                        style="transform: scale(0.8);width: 56px">
                  {{ scope.row.medal_name }}
                </el-tag>
                <el-tag effect="dark" round type="info" size="small" v-else style="transform: scale(0.8);width: 56px">
                  我没牌
                </el-tag>
                <b>{{ scope.row.uname }}</b>
              </div>
              <div style="color: #757575">{{ scope.row.title }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="last_tetris_time" label="更新时间" width="130">
          <template #default="scope">
            <div>
              <div>上次打块: <b>{{ friendlyTime(scope.row.last_tetris_time) }}</b></div>
              <div>上次开播: <b>{{ friendlyTime(scope.row.live_start_time) }}</b></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="viewRoom(scope.$index, scope.row)">隐身查房</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;margin-top: 15px">
        <el-pagination
            size="small"
            layout="total, prev, pager, next"
            :total="pagination.total"
            v-model:page-size="pagination.limit"
            v-model:current-page="pagination.page"
            @current-change="listTetrRoom"
        />
      </div>
    </div>
  </div>
  <!-- 查房弹窗 -->
  <el-dialog v-model="viewRoomDialogVisible" width="80%" :title="viewRoomInfo.title" align-center center draggable
             destroy-on-close>
    <LiveRoomFrame style="width: 100%;height: 80vh;border: none" :cid="viewRoomInfo.room_id" :danmaku="1" :send="1"
                   :mute="0"></LiveRoomFrame>
  </el-dialog>
  <!-- 统计状态 -->
  <StatusDrawer v-if="statDrawerVisible"
                :show="statDrawerVisible"
                @onBack="statDrawerVisible = false"
                :auto-update="true">
  </StatusDrawer>
</template>

<script setup>

import {ref} from 'vue'
import * as tetrApi from '@/api/tetr'
import LiveRoomFrame from "@/components/LiveRoomFrame.vue";
import StatusDrawer from "@/components/StatusDrawer.vue";
import {ElMessage} from "element-plus";

// 全部播间列表
const list = ref([]);

// 分页信息
const pagination = ref({page: 1, limit: 100, total: 0})
const isLoaded = ref(false);

// 表单绑定
const formInline = ref({
  online: 1, // 游戏状态
  live_status: -1, // 直播状态
  search: '', // 搜索关键词
  type: 'all', // 搜索类型
})

// 搜索字段类型
const typeOptions = ref([
  {label: '模糊搜索', value: 'all'},
  {label: '主播名字', value: 'uname'},
  {label: '房间标题', value: 'title'},
  {label: '房间号码', value: 'room_id'},
  {label: '牌子名称', value: 'medal_name'},
  {label: '分区名称', value: 'area_name'},
])

// 是否显示查房弹窗
const viewRoomDialogVisible = ref(false)
const statDrawerVisible = ref(false)

// 当前查房信息
const viewRoomInfo = ref({})

// 获取当前方块玩家列表
const listTetrRoom = () => {
  isLoaded.value = false;
  tetrApi.page({...formInline.value, page: pagination.value.page, limit: pagination.value.limit}).then((res) => {
    // 赋值分页与列表数据
    pagination.value.limit = res.data.list.per_page;
    pagination.value.total = res.data.list.total;
    list.value = res.data.list.data;
    // 平滑滚动到顶部
    window.scrollTo({top: 0, behavior: 'smooth'});
  }).finally(() => {
    isLoaded.value = true;
  })
}

/**
 * 渲染表格状态
 */
const tableRowClassName = ({row}, rowIndex) => {
  return ''
}

/**
 * 打开查房预览
 * @param index
 * @param row
 */
const viewRoom = (index, row) => {
  viewRoomInfo.value = row
  viewRoomDialogVisible.value = true
}

// 友好时间显示
const friendlyTime = (time) => {
  if (time === 0) {
    return '未知';
  }
  const now = new Date();
  const diff = now - new Date(time * 1000);
  const diffSeconds = Math.floor(diff / 1000);
  const diffMinutes = Math.floor(diff / 1000 / 60);
  const diffHours = Math.floor(diff / 1000 / 60 / 60);
  const diffDays = Math.floor(diff / 1000 / 60 / 60 / 24);
  if (diffSeconds < 60) return '刚刚';
  if (diffMinutes < 60) return diffMinutes + '分钟前';
  if (diffHours < 24) return diffHours + '小时前';
  if (diffDays < 1) return diffDays + '天前';
}

/**
 * 快速搜索
 * @param keyword
 * @param online
 * @param live
 */
const fastSearch = (keyword, online = -1, live = -1) => {
  formInline.value.search = keyword;
  formInline.value.online = online;
  formInline.value.live_status = live;
  formInline.value.type = 'all';
  pagination.value.page = 1;
  listTetrRoom();
}

/**
 * 重置搜索
 */
const resetSearch = () => {
  formInline.value.search = '';
  formInline.value.online = 1;
  formInline.value.live_status = -1;
  formInline.value.type = 'all';
  pagination.value.page = 1;
  listTetrRoom();
}

const copyText = (text) => {
  const input = document.createElement('input');
  input.value = text;
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
  ElMessage.success('已复制房间号: ' + text);
}

// 读取玩家列表
listTetrRoom();

</script>

<style>
.el-table .info-row {
  --el-table-tr-bg-color: var(--el-color-primary-light-9);
}

.el-table .danger-row {
  --el-table-tr-bg-color: var(--el-color-danger-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>

<style scoped>
.action {
  display: flex;
  align-items: center;
  justify-content: center;
}

.areas {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
  padding-left: 14px;
  font-size: 13px;

  .link {
    margin-left: 10px;
    cursor: pointer;
    background: #f2f2f2;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
    color: #333;

    &.disabled {
      color: #999;
      text-decoration: line-through;
      cursor: not-allowed;
    }

    &.hot {
      color: #ff0056;
      font-weight: 700;
    }
  }
}

.header {
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;

  .left {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;

    &:after {
      content: '';
      height: 42px;
      width: 1px;
      background: #f2f2f2;
      position: relative;
      margin-left: 20px;
    }

    .logo {
      width: 64px;
    }
  }

  .right {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;

    .count {
      font-size: 12px;
      padding: 3px 0;
    }

    .desc {
      padding: 3px 0;
      font-size: 12px;
      color: #888;
    }
  }

}

</style>
